import { JSX, Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'
import cubeUrl from '../assets/models/ren.glb?url'
function Model(): JSX.Element {
  const { scene } = useGLTF(cubeUrl)
  // eslint-disable-next-line react/no-unknown-property
  return <primitive object={scene} />
}

const Module3D = (): JSX.Element => {
  return (
    <Canvas
      style={{
        width: '900px',
        height: '900px'
      }}
      gl={{ preserveDrawingBuffer: true }}
      camera={{
        position: [2, 2, 2], // 相机位置
        fov: 60 // 视角（Field of View）
      }}
    >
      {/* eslint-disable-next-line react/no-unknown-property */}
      <ambientLight intensity={0.5} />
      {/* eslint-disable-next-line react/no-unknown-property */}
      <directionalLight position={[5, 5, 5]} intensity={1} />
      <Suspense fallback={<>加载中</>}>
        <Model></Model>
      </Suspense>
      <OrbitControls />
    </Canvas>
  )
}

export default Module3D
